<template>
  <span>
    <el-button class="btn" type="text" size="mini" icon="el-icon-edit" @click="open()"></el-button>
    <el-dialog :visible.sync="dialogVisible" :width="isMobile?'90%':'50%'" :before-close="reset" append-to-body>
      <span slot="title">修改客户 <b>{{ uObjCus.nickname }}</b> 标签</span>
      <el-form ref="form" label-width="100px">
        <el-form-item label="昵称：">
          <el-input type="text" v-model="editName" :size="isMobile?'mini':'medium'"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="text" v-model="editPosition" :size="isMobile?'mini':'medium'"></el-input>
        </el-form-item>
        <div v-loading="loading">
          <el-form-item label="进度标签：">
            <el-button-group>
              <template v-for="(v,k) in tags_1">
                <el-button :key="k" :size="isMobile?'mini':'medium'"
                  :type="v.isChecked?'primary':''"
                  @click="modifySelfTag($event,v)">
                  {{v.label}}
                </el-button>
              </template>
            </el-button-group>
          </el-form-item>
          <el-form-item label="资金标签：">
            <el-button-group>
              <template v-for="(v,k) in tags_2">
                <el-button :key="k" :size="isMobile?'mini':'medium'"
                  :type="v.isChecked?'primary':''"
                  @click="modifySelfTag($event,v)">
                  {{v.label}}
                </el-button>
              </template>
            </el-button-group>
          </el-form-item>
          <el-form-item label="表单有效性：">
            <el-button-group>
              <template v-if="editNumSaleTag===null">查无此人</template>
              <template v-else>
                <template v-for="(v,k) in 表单有效性">
                  <el-button :key="k" :size="isMobile?'mini':'medium'"
                    :type="v.value === editNumSaleTag?'primary':''"
                    @click="modifySaleTag($event,v.value)">
                    {{v.label}}
                  </el-button>
                </template>
              </template>
            </el-button-group>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </span>
    </el-dialog>
  </span>
</template>

<script>
//接口文档：http://test.zfxfu.com:9997/
import { mapState, mapMutations } from 'vuex';
export default {
  components: {},
  computed: {
    ...mapState([
      'isMobile', 'mobileView',
      'conditional',
      'selfTags',
      'rightView', 'uObjApp',
      'uObjCus', 'uObjCusTags',
    ]),
    tag_v1:function(){
      let father = _.cloneDeep(this.uObjCus.selfTag).find((v)=>{
        return v.type == 1;
      })
      return _.get(father,'selfTags[0].selfTagId','')
    },
    tag_v2:function(){
      let father = _.cloneDeep(this.uObjCus.selfTag).find((v)=>{
        return v.type == 2;
      })
      return _.get(father,'selfTags[0].selfTagId','')
    },
    tags_1:function(){
      let father = _.cloneDeep(this.selfTags).find((v)=>{
        return v.id == 1;
      })
      return _.get(father,'selfTag',[]).map((v)=>{
        return {
          value:v.selfTagId,label:v.tagName,
          pid:father.id,
          isChecked:v.selfTagId == this.tag_v1
        };
      })
    },
    tags_2:function(){
      let father = _.cloneDeep(this.selfTags).find((v)=>{
        return v.id == 2;
      })
      return _.get(father,'selfTag',[]).map((v)=>{
        return {
          value:v.selfTagId,label:v.tagName,
          pid:father.id,
          isChecked:v.selfTagId == this.tag_v2
        };
      })
    },
  },
  watch: {},
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      dialogVisible:false,
      editName: '',//修改nickname
      editPosition: '',//修改职务，20220218新增
      editNumSaleTag:null,
      表单有效性:[
        // {value:0,label:'仅数据库存在'},
        {value:1,label:'有效'},
        {value:2,label:'停机'},
        {value:3,label:'空号'},
        {value:4,label:'拒接'},
        {value:5,label:'非本人'},
        {value:6,label:'无意愿'},
      ],
      loading:false,
    }
  },
  methods: {
    test(){},
    reset(done){
      console.log('%c [ done ]-133', 'font-size:13px; background:pink; color:#bf2c9f;', done)
      this.editName = this.$options.data().editName;
      this.editPosition = this.$options.data().editPosition;
      this.editNumSaleTag = null;
      done();//done 用于关闭 Dialog
    },
    open() {
      let employeeId = this.$store.getters.getOpt.companyEmployeeId;
      let esId = this.uObjCus.eSCompanyId;
      let uId = this.uObjCus.id;
      Promise.all([
        this.$api.getUserInfo({esId,uId}),
        this.$api.getValidateForm({employeeId,esId,uId})
      ]).then((res) => {
        return Promise.resolve(res.map((v)=>{
          return v.data
        }))
      }).then((res)=>{
        if(res[0].code==200){
          this.editName = res[0].data.name;
          this.editPosition = res[0].data.position;
        }
        if(res[1].code==200){
          this.editNumSaleTag = Number(res[1].data);//后端数据会传成null
        }else{//通常code:404
          this.editNumSaleTag = null;
        }
        this.dialogVisible = true;
      })
    },//修改用户名字,准备；//增加修改范围，增加请求
    close(){
      this.dialogVisible = false;
    },
    confirmEditName() {
      let opt = {
        name: this.editName,
        // alias:this.uObjCus.name,
        position: this.editPosition,
        esCompanyId: this.uObjCus.eSCompanyId,
        userId: this.uObjCus.id,
      }
      
      this.$api.editNickname(opt).then((res) => {
        this.$store.commit('updataCusNickName', {
          cusId: opt.userId,
          newName: opt.name
        })
        return this.$message({
          type: 'success',
          message:'修改成功',
        })
      }).then(()=>{
        this.close();
      }).catch((err) => {
        this.$message({
          type: 'error',
          message:'修改失败',
        })
        console.error(err)
      });
    },//修改用户名字,修改
    confirm(){
      this.confirmEditName();
    },
    cancel() {
      this.close();
      this.reset();
      
    },//修改用户名字,取消
    modifySelfTag(event,t){
      this.loading = true;
      let target = event.target;
      if (target.nodeName == "SPAN") {
        target = event.target.parentNode;
      }
      target.blur();

      let isModify = t.isChecked;
      //相同,则提交删除请求
      //不同,则提交增加请求
      let uObjCus = this.uObjCus
      let ceid = this.$store.getters.getCEID(true)
      let opt = {
        eSCompanyId:uObjCus.eSCompanyId,
        userid:uObjCus.id,
        selfTagId:t.value,
        companyEmployeeid:ceid,
      };
      this.$api.selfTag[isModify ? 'delOne' : 'addOne'](opt).then((res)=>{
        this.$store.commit('updataSelfTags',{
          esId:uObjCus.eSCompanyId,
          uId:uObjCus.id,
          tag:t,
          action:isModify ? '' : 'add',
        })
        this.loading = false;
      }).catch((err)=>{
        this.$message({
          type: 'error',
          message: '修改失败',
        })
        console.log(err)
        this.loading = false;
      })
      //临时任务：标签修改时发送一个次要请求用于服务端统计用。
      // this.$axios.get(
      //   "/api/chatmsg/conversion"
      //   ,{params:{
      //     tag:isModify ? '' : t.selfTagId,
      //     escompanyId:opt.eSCompanyId,
      //     qywxUserId:opt.userid
      //   }}
      // ).then((res)=>{
      //   console.log(res)
      // })
    },
    modifySaleTag(event,v){
      this.loading = true;
      let target = event.target;
      if (target.nodeName == "SPAN") {
        target = event.target.parentNode;
      }
      target.blur();
      let setId = (v == this.editNumSaleTag) ? 0 : v;
      let employeeId = this.$store.getters.getOpt.companyEmployeeId;
      let esId = this.uObjCus.eSCompanyId;
      let uId = this.uObjCus.id;
      this.$api.setValidateForm({
        employeeId,esId,uId,setId
      }).then((res)=>{
        if(res.data.code == 200){
          this.$message({
            type:'success',
            message:'修改成功',
          });
        }
        this.editNumSaleTag = setId;
        this.loading = false;
      }).catch((err)=>{
        console.log(err)
        this.$message({
          type:'error',
          message:'修改失败',
        });
        this.loading = false;
      })
    },
  },
  mounted() {
  }
}
</script>

<style>

</style>
